<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密钥生成器 - AES-256 & SHA-256</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 4.5rem;
            padding-bottom: 2rem;
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin-top: 1rem;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .result-container {
            margin-top: 2rem;
            padding: 1rem;
            background-color: #fff;
            border-radius: 0.25rem;
            border: 1px solid #dee2e6;
        }
        pre {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            white-space: pre-wrap;
            word-break: break-all;
            margin-bottom: 0.5rem;
        }
        .nav-tabs .nav-link {
            cursor: pointer;
        }
        .card-header {
            background-color: rgba(0, 0, 0, 0.03);
            font-weight: 500;
        }
        .result-card {
            margin-bottom: 1rem;
        }
        .form-control, .form-select {
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="/">敏感配置加密生成器</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <!--<li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/keygen">密钥生成器</a>
                    </li>-->
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <h1 class="text-center mb-4">密钥生成器 - AES-256 & SHA-256</h1>
        
        <div class="card mb-4">
            <div class="card-body">
                <ul class="nav nav-tabs mb-3" id="keyTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="aes-tab" data-bs-toggle="tab" data-bs-target="#aes" 
                                type="button" role="tab" aria-controls="aes" aria-selected="true">AES-256</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="sha-tab" data-bs-toggle="tab" data-bs-target="#sha" 
                                type="button" role="tab" aria-controls="sha" aria-selected="false">SHA-256</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="hmac-tab" data-bs-toggle="tab" data-bs-target="#hmac" 
                                type="button" role="tab" aria-controls="hmac" aria-selected="false">HMAC</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" 
                                type="button" role="tab" aria-controls="all" aria-selected="false">全部生成</button>
                    </li>
                </ul>
                
                <div class="tab-content" id="keyTabContent">
                    <!-- AES-256 选项卡 -->
                    <div class="tab-pane fade show active" id="aes" role="tabpanel" aria-labelledby="aes-tab">
                        <p>AES-256 是一种对称加密算法，使用256位密钥进行加密和解密操作。</p>
                        <div class="d-grid">
                            <button type="button" class="btn btn-primary" id="generateAesBtn">生成 AES-256 密钥</button>
                        </div>
                    </div>
                    
                    <!-- SHA-256 选项卡 -->
                    <div class="tab-pane fade" id="sha" role="tabpanel" aria-labelledby="sha-tab">
                        <p>SHA-256 是一种哈希算法，将任意大小的数据映射为固定大小的256位哈希值。</p>
                        <div class="mb-3">
                            <label for="shaSeed" class="form-label">种子值 (可选):</label>
                            <input type="text" class="form-control" id="shaSeed" placeholder="输入用于生成哈希的种子值">
                            <div class="form-text">如果留空，将使用随机生成的种子值</div>
                        </div>
                        <div class="d-grid">
                            <button type="button" class="btn btn-primary" id="generateShaBtn">生成 SHA-256 哈希</button>
                        </div>
                    </div>
                    
                    <!-- HMAC 选项卡 -->
                    <div class="tab-pane fade" id="hmac" role="tabpanel" aria-labelledby="hmac-tab">
                        <p>HMAC-SHA-256 是一种基于哈希的消息认证码，常用于消息完整性验证和身份认证。</p>
                        <div class="mb-3">
                            <label for="hmacKeySize" class="form-label">密钥大小 (字节):</label>
                            <select class="form-select" id="hmacKeySize">
                                <option value="16">16 字节 (128 位)</option>
                                <option value="24">24 字节 (192 位)</option>
                                <option value="32" selected>32 字节 (256 位)</option>
                                <option value="48">48 字节 (384 位)</option>
                                <option value="64">64 字节 (512 位)</option>
                            </select>
                        </div>
                        <div class="d-grid">
                            <button type="button" class="btn btn-primary" id="generateHmacBtn">生成 HMAC 密钥</button>
                        </div>
                    </div>
                    
                    <!-- 全部生成选项卡 -->
                    <div class="tab-pane fade" id="all" role="tabpanel" aria-labelledby="all-tab">
                        <p>一次性生成所有类型的密钥，包括 AES-256 密钥、HMAC-SHA-256 密钥和 SHA-256 哈希。</p>
                        <div class="d-grid">
                            <button type="button" class="btn btn-primary" id="generateAllBtn">生成所有密钥</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="result-container d-none" id="resultContainer">
            <h4>生成结果:</h4>
            <div id="resultContent">
                <!-- 结果将在这里显示 -->
            </div>
        </div>
    </div>
    
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化标签页
            const triggerTabList = [].slice.call(document.querySelectorAll('#keyTabs button'));
            triggerTabList.forEach(function(triggerEl) {
                const tabTrigger = new bootstrap.Tab(triggerEl);
                
                triggerEl.addEventListener('click', function(event) {
                    event.preventDefault();
                    tabTrigger.show();
                });
            });
            
            // 添加生成按钮的事件监听器
            document.getElementById('generateAesBtn').addEventListener('click', generateAesKey);
            document.getElementById('generateShaBtn').addEventListener('click', generateShaHash);
            document.getElementById('generateHmacBtn').addEventListener('click', generateHmacKey);
            document.getElementById('generateAllBtn').addEventListener('click', generateAllKeys);
        });
        
        // 生成AES-256密钥
        function generateAesKey() {
            fetch('/api/keygen/aes')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('生成AES密钥失败');
                    }
                    return response.json();
                })
                .then(data => {
                    showResult([{
                        title: 'AES-256 密钥',
                        content: [
                            { label: '算法', value: data.algorithm },
                            { label: '密钥 (Base64编码)', value: data.key, copy: true }
                        ]
                    }]);
                })
                .catch(error => {
                    showError('生成AES密钥失败: ' + error.message);
                });
        }
        
        // 生成SHA-256哈希
        function generateShaHash() {
            const seed = document.getElementById('shaSeed').value;
            let url = '/api/keygen/sha256';
            if (seed) {
                url += '?seed=' + encodeURIComponent(seed);
            }
            
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('生成SHA-256哈希失败');
                    }
                    return response.json();
                })
                .then(data => {
                    showResult([{
                        title: 'SHA-256 哈希',
                        content: [
                            { label: '算法', value: data.algorithm },
                            { label: '种子值', value: data.seed },
                            { label: '哈希值 (十六进制)', value: data.hash, copy: true }
                        ]
                    }]);
                })
                .catch(error => {
                    showError('生成SHA-256哈希失败: ' + error.message);
                });
        }
        
        // 生成HMAC密钥
        function generateHmacKey() {
            const keySize = document.getElementById('hmacKeySize').value;
            fetch('/api/keygen/hmac?keySize=' + keySize)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('生成HMAC密钥失败');
                    }
                    return response.json();
                })
                .then(data => {
                    showResult([{
                        title: 'HMAC-SHA-256 密钥',
                        content: [
                            { label: '算法', value: data.algorithm },
                            { label: '密钥大小', value: data.keySizeBytes + ' 字节 (' + data.keySizeBits + ' 位)' },
                            { label: '密钥 (Base64编码)', value: data.key, copy: true }
                        ]
                    }]);
                })
                .catch(error => {
                    showError('生成HMAC密钥失败: ' + error.message);
                });
        }
        
        // 生成所有密钥
        function generateAllKeys() {
            fetch('/api/keygen/all')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('生成密钥失败');
                    }
                    return response.json();
                })
                .then(data => {
                    const results = [
                        {
                            title: 'AES-256 密钥',
                            content: [
                                { label: '算法', value: data.aes.algorithm },
                                { label: '密钥 (Base64编码)', value: data.aes.key, copy: true }
                            ]
                        },
                        {
                            title: 'HMAC-SHA-256 密钥',
                            content: [
                                { label: '算法', value: data.hmac.algorithm },
                                { label: '密钥大小', value: data.hmac.keySizeBytes + ' 字节 (' + data.hmac.keySizeBits + ' 位)' },
                                { label: '密钥 (Base64编码)', value: data.hmac.key, copy: true }
                            ]
                        },
                        {
                            title: 'SHA-256 哈希',
                            content: [
                                { label: '算法', value: data.sha256.algorithm },
                                { label: '哈希值 (十六进制)', value: data.sha256.hash, copy: true }
                            ]
                        }
                    ];
                    
                    showResult(results);
                })
                .catch(error => {
                    showError('生成密钥失败: ' + error.message);
                });
        }
        
        // 显示结果
        function showResult(results) {
            const resultContainer = document.getElementById('resultContainer');
            const resultContent = document.getElementById('resultContent');
            
            // 清空之前的结果
            resultContent.innerHTML = '';
            
            // 构建结果卡片
            results.forEach(result => {
                const card = document.createElement('div');
                card.className = 'card result-card';
                
                const cardHeader = document.createElement('div');
                cardHeader.className = 'card-header';
                cardHeader.textContent = result.title;
                
                const cardBody = document.createElement('div');
                cardBody.className = 'card-body';
                
                result.content.forEach(item => {
                    const group = document.createElement('div');
                    group.className = 'mb-3';
                    
                    const label = document.createElement('label');
                    label.className = 'form-label';
                    label.innerHTML = '<strong>' + item.label + ':</strong>';
                    
                    const pre = document.createElement('pre');
                    pre.textContent = item.value;
                    pre.className = 'mb-1';
                    
                    group.appendChild(label);
                    group.appendChild(pre);
                    
                    if (item.copy) {
                        const copyBtn = document.createElement('button');
                        copyBtn.className = 'btn btn-sm btn-outline-secondary';
                        copyBtn.textContent = '复制';
                        copyBtn.onclick = function() {
                            copyText(item.value);
                        };
                        group.appendChild(copyBtn);
                    }
                    
                    cardBody.appendChild(group);
                });
                
                card.appendChild(cardHeader);
                card.appendChild(cardBody);
                resultContent.appendChild(card);
            });
            
            // 显示结果容器
            resultContainer.classList.remove('d-none');
        }
        
        // 显示错误信息
        function showError(errorMessage) {
            const resultContainer = document.getElementById('resultContainer');
            const resultContent = document.getElementById('resultContent');
            
            resultContent.innerHTML = `
                <div class="alert alert-danger">
                    <strong>错误:</strong> ${errorMessage}
                </div>
            `;
            
            resultContainer.classList.remove('d-none');
        }
        
        // 复制文本到剪贴板
        function copyText(text) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    alert('已复制到剪贴板！');
                })
                .catch(err => {
                    console.error('复制失败: ', err);
                    alert('复制失败，请手动复制。');
                });
        }
    </script>
</body>
</html> 